<template>
  <!-- 关系图graph -->
  <div style="margin-bottom: 20px;">
    <div ref="fullScreenBox" :id="chartId" class="chart" style="min-height:600px;"></div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import Ecolors from "@/utils/chartColors";
import { resize, spaceTxt } from "@/utils/utils";
export default {
  mixins: [resize],
  props: {
    chartId: {
      type: String,
    },
    chartData: {},
  },
  data() {
    return {
      chart: null,
      colors: [],
      seriesData: [],
    };
  },
  computed: {
    ...mapState(["curChartConfig"]),
  },
  methods: {
    getCurChartConfig() {
      if (Object.keys(this.curChartConfig).length > 0) {
        let colors = [];
        this.curChartConfig.colors.forEach((v) => {
          colors.push(v.color);
        });
        this.colors = [...colors, ...Ecolors.color];
      }
      if (Object.keys(this.chartData).length > 0) {
        this.init();
      }
    },
    getSeriesData() {
      let seriesData = [];
      let nodes = this.chartData.nodes;
      let links = this.chartData.links;

      let maxArr = [];
      // 文字过长换行
      nodes.forEach((v, i) => {
        v.itemStyle = {
          color: this.colors[i],
        };
        v.label = {
          show: true,
          color: "#666666",
        };
        maxArr.push(v.value);
      });
      let max = Math.max(...maxArr);
      nodes.forEach((v) => {
        if (v.value !== 0) {
          v.symbolSize = 30 * (Math.log(v.value) / Math.log(max)) + 10;
        } else {
          v.symbolSize = 20;
        }
      });
      seriesData.push({
        type: "graph",
        layout: "circular",
        circular: {
          rotateLabel: true,
        },
        roam: true,
        focusNodeAdjacency: true,
        data: nodes,
        links,
        label: {
          position: "right",
          formatter: "{b}",
        },
        lineStyle: {
          color: "#9e9e9e",
          curveness: 0.2, // Math.random()
        },
      });
      return seriesData;
    },
    init() {
      // let seriesData = this.getSeriesData()
      // 背景色
      let backgroundColor =  this.curChartConfig['showBgColor'].checked ? this.curChartConfig['showBgColor'].color :'#fff'
      let option = {
        // 背景色
        backgroundColor: backgroundColor,
        tooltip: {
          show: true,
          trigger: "item"
        },
        series: {
          type: "sunburst",
          data: this.chartData,
          radius: [0, "95%"],
          // sort: undefined,
          emphasis: {
            focus: "none",
            // focus: "ancestor",
            // label: {
            //   overflow: "break",
            // }
          },
          levels: [
            {},
            // {
            //   r0: "15%",
            //   r: "45%",
            //   itemStyle: {
            //     borderWidth: 2,
            //   },
            //   label: {
            //     rotate: "tangential",
            //   },
            // },
            {
              r0: "15%",
              r: "45%",
              itemStyle: {
                borderWidth: 2,
              },
              label: {
                width: 70,
                overflow: "break",
                minAngle: 14,
                formatter: (params) => {
                  let str = ""
                  let name = params.name
                  if (name.length > 10) {
                    str = name.slice(0, 10) + "..."
                  } else {
                    str = name
                  }
                  return str
                }
                // rotate: "tangential",
              },
            },
            {
              r0: "45%",
              r: "100%",
              label: {
                width: 160,
                overflow: "truncate",
                align: "right",
              },
            },
            // {
            //   r0: "70%",
            //   r: "80%",
            //   label: {
            //     position: "outside",
            //     padding: 3,
            //     silent: false,
            //   },
            //   itemStyle: {
            //     borderWidth: 3,
            //   },
            // },
          ],
        },
      };
      this.chart.clear();
      this.chart.setOption(option, true);

      this.$emit("chartDom", this.chart);

      // 后台报告下载
      this.chart.on("finished", () => {
        // let tempId = this.$route.query.tempId
        // if (tempId) {
        // }
        this.getEchartImg(this.chart.getDataURL());
      });
    },
    getEchartImg(base) {
      window.echartImg = base;
    },
  },
  watch: {
    curChartConfig: {
      deep: true,
      handler: function() {
        this.getCurChartConfig();
      },
    },
    chartData() {
      if (Object.keys(this.chartData).length <= 0) {
        if (this.chart) this.chart.clear();
      } else {
        this.getCurChartConfig();
      }
    },
  },
  mounted() {
    this.chart = this.$echarts.init(document.getElementById(this.chartId));
    this.$emit("domRef", document.getElementById(this.chartId))
    this.getCurChartConfig();
  },
  destroyed() {
    this.chart.dispose();
    this.chart = null;
  },
};
</script>

<style lang="scss" scoped>
.chart {
  // height: 800px;
  // background-color: #fff;
}
</style>
